<template>
	<div v-if="detail">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span style="font-size: 16px; font-weight: bold">订单信息</span>
			</div>
			<div class="field-cont">
				<div class="field">
					<div class="field__title">订单编号</div>
					<div class="field__value">{{ detail.num }}</div>
				</div>
				<div class="field">
					<div class="field__title">投保人</div>
					<div class="field__value">{{ detail.customerName }}</div>
				</div>
				<div class="field">
					<div class="field__title">方案名称</div>
					<div class="field__value">{{ detail.productName }}</div>
				</div>
				<div class="field">
					<div class="field__title">被保险人</div>
					<div class="field__value">{{ detail.relationName }}</div>
				</div>
				<div class="field">
					<div class="field__title">保险期间</div>
					<div class="field__value">{{ detail.period }}</div>
				</div>
				<div class="field">
					<div class="field__title">保费</div>
					<div class="field__value">{{ detail.money }}</div>
				</div>
			</div>
		</el-card>

		<div class="box box-card shadow">
			<div slot="header" class="clearfix"></div>
			<div class="field-cont">
				<div
					class="field field--block field--strong"
					v-if="detail.insuranceSeal"
				>
					<div class="field__title">投保单</div>
					<div class="field__value">
						<a
							:href="detail.insuranceSeal"
							download="投保单"
							style="text-decoration: underline; color: #5f88ff"
							>查看投保单</a
						>
					</div>
				</div>
				<div
					class="field field--block field--strong"
					v-if="detail.businessLicense"
				>
					<div class="field__title">营业执照</div>
					<div class="field__value">
						<a
							:href="detail.businessLicense"
							download="投保单"
							style="text-decoration: underline; color: #5f88ff"
							>查看营业执照</a
						>
					</div>
				</div>
				<div class="field field--block field--strong" v-if="detail.leaderIdNum">
					<div class="field__title">法定代表人身份证</div>
					<div class="field__value">{{ detail.leaderIdNum }}</div>
				</div>
			</div>
		</div>
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span style="font-size: 16px; font-weight: bold">人员信息</span>
			</div>

			<div class="">
				<el-table class="" size="small" :data="personList" border>
					<el-table-column
						v-for="field in personFields"
						:label="field.name"
						:prop="field.fieldName"
						:key="field.fieldName"
						:width="field.width || 'auto'"
					>
						<template slot-scope="{ row }">
							<span v-if="field.formType === 'select'">
								{{ getValueBySelect(field, row) }}
							</span>
							<span v-else>
								{{ row[field.fieldName] }}
							</span>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-card>

		<el-card class="box-card" v-if="detail.policyType === 2">
			<div slot="header" class="clearfix">
				<span style="font-size: 16px; font-weight: bold">缴费信息</span>
			</div>
			<div class="field-cont">
				<div class="field" v-for="account in accountInfo" :key="account.id">
					<div class="field__title">{{ account.name }}</div>
					<div class="field__value">{{ account.value }}</div>
				</div>
			</div>
		</el-card>

		<div style="text-align: center" v-if="showConfirmBtn">
			<el-button type="primary" @click="onPay" :loading="orderConfirming"
				>确认订单</el-button
			>
		</div>

		<el-dialog title="支付人信息" width="400px" :visible.sync="paymentShow">
			<!-- <div v-html="productDetail[agreeProp]"></div> -->
			<el-form
				:model="paymentForm"
				:rules="paymentRules"
				label-width="130px"
				label-position="top"
				ref="paymentForm"
				class="payment-form"
				v-loading="paymentLoading"
			>
				<el-form-item label="支付人" prop="payer" required>
					<el-input
						size="mini"
						v-model="paymentForm.payer"
						style="width: 100%"
					></el-input>
				</el-form-item>
				<el-form-item label="支付人证件号" prop="payerCardNum" required>
					<el-input
						size="mini"
						v-model="paymentForm.payerCardNum"
						style="width: 100%"
					></el-input>
				</el-form-item>
			</el-form>
			<el-button @click="savePayInfo" type="primary" size="mini" slot="footer"
				>去支付</el-button
			>
		</el-dialog>

		<el-dialog
			title="扫描缴费二维码"
			:visible.sync="codeVisible"
			width="500px"
			top="9vh"
		>
			<img :src="detail.qrCodeUrl" alt="" class="qrcode" />
			<!-- <el-button type="primary" size="mini"></el-button> -->
			<div
				style="
					text-align: center;
					display: flex;
					justify-content: space-between;
					align-items: center;
				"
			>
				<div>
					或&nbsp;
					<a
						:href="detail.payFileUrl"
						target="_blank"
						style="text-decoration: underline; color: #5f88ff"
						>点击跳转收银台<i class="el-icon-arrow-right"></i
					></a>
				</div>
				<el-button
					type="primary"
					size="mini"
					@click="
						codeVisible = false
						premiumVisible = true
					"
					>我已支付，上传缴费凭证</el-button
				>
			</div>
		</el-dialog>
		<el-dialog
			title="缴费电子凭证上传"
			:visible.sync="premiumVisible"
			@update:visible="(val) => $emit('update:visible', val)"
			width="400px"
		>
			<div style="font-size: 14px; margin-bottom: 15px">上传银行电子回单</div>
			<upload
				v-model="bankElectronReceiptFiles"
				:data="
					bankElectronReceiptFiles.length
						? { batchId: bankElectronReceiptFiles[0].batchId }
						: {}
				"
			></upload>
			<div style="text-align: center" slot="footer">
				<el-button
					type="primary"
					@click="saveReceipt"
					size="medium"
					:loading="receiptLoading"
					>确认</el-button
				>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import {
	paymentDetail,
	queryTargetByType,
	querySubjectData,
	saveReceipt,
	isUploadPayFile,
	productDetail,
	goPay
} from '@/api'
import Upload from '@/components/form/fields/upload.vue'
import _ from 'lodash'
import { camelCase } from '@/utils'
export default {
	data() {
		return {
			productData: {},
			detail: null,
			personList: [],
			personFields: [],
			accountInfo: [],
			premiumVisible: false,

			paymentShow: false,
			paymentForm: {
				payer: process.env.NODE_ENV === 'development' ? '哈哈' : '',
				payerCardNum:
					process.env.NODE_ENV === 'development' ? '35068119990214102X' : ''
			},
			paymentRules: {
				payer: { required: true, message: '请填写支付人' },
				payerCardNum: { required: true, message: '请填写支付人证件号码' }
			},
			paymentLoading: false,

			bankElectronReceiptFiles: [], // 电子回单文件
			receiptLoading: false,
			orderConfirming: false,
			codeVisible: false
		}
	},
	computed: {
		businessId() {
			return this.$route.query.businessId
		},
		productId() {
			return this.$route.query.productId
		},
		showConfirmBtn() {
			return [1, 2, 4, 5].includes(this.productData.policyType)
		}
	},
	created() {
		productDetail(this.productId).then((res) => {
			this.productData = res.data
		})
	},
	mounted() {
		this.fetchDetail()
		this.fetchTableField()
		this.fetchTableList()
	},
	methods: {
		fetchDetail() {
			paymentDetail(this.businessId).then((res) => {
				this.detail = res.data
				const infos = res.data.premiumAccount.split(';')
				let accountInfo = []
				for (let str of infos) {
					let [name, value] = str.split(':').map((s) => s.trim())
					if (name || value) {
						accountInfo.push({ name, value })
					}
				}
				this.accountInfo = accountInfo
			})
		},
		// 表头
		fetchTableField() {
			queryTargetByType(this.$route.query.productId).then((res) => {
				res.data.forEach((field) => {
					field.fieldName = _.camelCase(field.fieldName)
				})
				this.personFields = res.data
			})
		},
		// 表体
		fetchTableList() {
			querySubjectData(this.$route.query.businessId).then((res) => {
				this.personList = res.data.list
			})
		},

		getValueBySelect(field, row) {
			return (
				field.setting?.find((opt) => opt.value == row[field.fieldName])?.name ||
				'--'
			)
		},

		// 回单文件提交
		saveReceipt() {
			if (this.bankElectronReceiptFiles.length === 0) {
				this.$message.error('请先上传回单文件')
				return
			}
			this.receiptLoading = true
			saveReceipt(this.$route.query.businessId, {
				bankElectronReceipt: this.bankElectronReceiptFiles[0].batchId
			})
				.then(() => {
					this.$message.success('保存成功')
					this.$router.push('/insure/success')
					Recorder.submit({
						businessId: this.$route.query.businessId
					})
				})
				.finally(() => {
					this.receiptLoading = false
				})
		},
		// 支付人信息
		savePayInfo() {
			this.$refs.paymentForm.validate((valid) => {
				if (!valid) return
				this.paymentLoading = true
				goPay(this.businessId, this.paymentForm)
					.then((res) => {
						Recorder.submit({
							businessId: this.businessId
						})
						setTimeout(() => {
							location.href = res.data
						}, 200)
					})
					.finally(() => {
						this.paymentLoading = false
					})
			})
		},
		goPay(data = {}) {
			this.orderConfirming = true
			goPay(this.businessId, data)
				.then(() => {
					this.$message.success('操作成功')
					this.$router.replace({ path: '/11654/success' })
					const businessId = this.businessId
					setTimeout(() => {
						Recorder.submit({ businessId })
					}, 500)
				})
				.finally(() => {
					this.orderConfirming = false
				})
		},
		onPay() {
			switch (this.productData.policyType) {
				case 1: // 目前是国寿 需要支付人/走goPay去收银台
					this.paymentShow = true
					break
				case 2: // 目前是太平 需要扫二维码支付
					this.codeVisible = true
					break
				case 4: // 目前是华农 出单 直接走goPay
					this.goPay()
					break
				case 5: // 目前是安联 上传支付凭证
					this.premiumVisible = true
					break
			}
		}
	},
	components: { Upload }
}
</script>

<style lang="scss" scoped="scoped">
.wrapper {
	padding: 20px;
}
.box-card {
	margin-bottom: 20px;
}
.box {
	padding: 20px;
	border-radius: 4px;
}
.shadow {
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.field-cont {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	align-items: start;

	.field {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: 10px;
		align-items: start;
		&__title {
			white-space: nowrap;
			min-width: 120px;
		}
		&--block {
			grid-column: -1 / 1;
		}
		&--strong {
			.field__title {
				font-weight: 600;
			}
		}
	}
}

.qrcode {
	display: block;
	width: 100%;
	min-height: 300px;
	height: auto;
	margin: 15px auto;
	object-position: center;
	object-fit: cover;
}
</style>
